<template>
    <div class="content">
        <div class="center_box">
            <div class="add_box">
                <h3>基础信息</h3>
                    <div class="add_right">
                        <el-form
                            label-position="top"
                            label-width="auto"
                            :model="objectForm"
                            style="margin: auto;"
                            ref='fromRef'
                        >
                        <el-row :gutter="24">
                            <el-col :span="8">
                                <el-form-item label="产品名称:" required prop="name">
                                    <el-input v-model="objectForm.name" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" >
                                <el-form-item label="分类:" prop="category">
                                <el-input v-model="objectForm.name" />
                                    <!-- <HhSelect type='category' @change="hChange" v-model="categoryInfo"/> -->
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="描述:" required prop="description">
                                    <el-input v-model="objectForm.description" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="现价:" required prop="price">
                                    <el-input v-model="objectForm.price" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="原价:" prop="originalPrice">
                                    <el-input v-model="objectForm.originalPrice"/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="库存:" prop="stockQuantity">
                                    <el-input v-model="objectForm.stockQuantity" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <div class="title_h_box">
                            <h3>拓展信息</h3>
                        </div>
                        <el-row :gutter="24">
                            <el-col :span="8" >
                                <el-form-item label="产品主图:" prop="imgFile">
                                <el-upload
                                    :show-file-list="false"
                                    :on-change="fileChange"
                                    accept=".jpg,.jpeg,.png"
                                >
                                    <img v-if="imageUrl" :src="imageUrl" class="avatar"/>
                                    <div v-else class="upload_box">点击上传<span>this is upload box ,is great</span></div>
                                </el-upload>
                                
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="地区:" prop="stockQuantity">
                                    <el-input v-model="objectForm.stockQuantity" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="网址:" prop="stockQuantity">
                                    <el-input v-model="objectForm.stockQuantity" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="指纹策略:" prop="stockQuantity">
                                    <el-input v-model="objectForm.stockQuantity" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="是否上架" prop="isActive">
                                    <el-switch
                                        :active-value="1"     
                                        :inactive-value="0"
                                        v-model="objectForm.isActive"
                                    />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        </el-form>
                    </div>
                    <div class="title_h_box" style="justify-content:flex-end;">
                        <el-button @click="cancel">取消</el-button>
                        <el-button type="primary" @click="confirmAdd">确定</el-button>
                    </div>
            </div>
        </div>
    </div>
</template>

<script setup>
    import { defineOptions , ref} from 'vue'
    import { ElMessage } from "element-plus";
    import HhSelect from '../utils/HhSelect.vue'
    import { useRouter } from 'vue-router'
    import * as productApi from '../../api/product/product.js'

    defineOptions({name: 'productInfo'})

    const objectForm = ref({
        productCode: '',         // 商品编码，String 类型
        name: '',                // 商品名称，不能为空，String 类型
        category: '',            // 商品类别，String 类型
        description: '',         // 商品描述，String 类型
        price: 0,             // 商品价格，BigDecimal 类型，保留两位小数
        originalPrice: 0,     // 商品折前价格，BigDecimal 类型，保留两位小数
        stockQuantity: 0,        // 商品库存数量，默认0，Integer 类型
        isActive: 1,             // 商品状态，1表示上架，0表示下架，默认1，Integer 类型
        image: '' ,       // 图片，String 类型
        imgFile: '' ,       
    })

let imageUrl = ref('')

const categoryInfo = ref('')

const fromRef = ref()

const router = new useRouter()
const hChange = (e) => {
        objectForm.value.category = e.id
}

const cancel = (e) => {
    router.push({
       name: 'product'
    })
}

const confirmAdd = async () => {
    
    const formData = new FormData();

    for (let key in objectForm.value) {
        formData.append(key, objectForm.value[key]);
    }

    // const res = await productApi.saveOrUpdate(formData)
    // const { code , msg } =res
    // if(code == '200') {
    //     ElMessage.success('操作成功')
    //     fromRef.value.resetFields()
    //     return
    // }
    // ElMessage.error(msg)
}

const fileChange = (file) => {
    imageUrl.value = URL.createObjectURL(file.raw)
    objectForm.value.imgFile = file.raw
}




</script>

<style lang="less" scoped>
    .add_right{
        width: 90%;
        height: 80%;
    }
        
    .center_box{
        flex-direction: column;
        justify-content: flex-start;
        margin-top: 0;
        padding-top: 0;
    }
    .add_box{
        padding-top: 0px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        margin-top: 0;
    }
    .title_h_box{
        width: 100%;
        display: flex;
        justify-content: flex-start;
    }
    
</style>